<template>
	<view>
		<!-- 导航栏组件 -->
		<page-nav-bar></page-nav-bar>

		<!-- 置顶底图 -->
		<view class="background-image"></view>
		<view class="scan-back">
			<image class="scan-back-image"
				src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/quality/scanQualityBack2.png"
				mode="widthFix"></image>
		</view>
		<view>

			<!-- 扫描按钮区域 -->
			<view class="scan-buttons">
				<image v-if="trueRightShow" mode="widthFix"
					src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/quality/scanTrue.png"
					class="lens-scan-btn" @click="startScan"></image>
				<image v-else mode="widthFix"
					src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/quality/scanCircle.png"
					class="lens-scan-btn" @click="startScan"></image>
				<image v-if="trueLeftShow" mode="widthFix"
					src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/quality/scanTrue.png"
					class="lens-scan-btn" @click="startScan"></image>
				<image v-else mode="widthFix"
					src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/quality/scanCircle.png"
					class="lens-scan-btn" @click="startScan"></image>
			</view>

			<!-- 保障按钮 -->
			<view class="warranty-button">
				<view class="warranty-btn" @click="showWarrantyInfo"></view>
			</view>
		</view>

		<!-- 加载提示 -->
		<uni-load-more v-if="loading" :status="'loading'" />

		<!-- 绑定佩戴者弹窗 -->
		<view class="mask" v-if="showBindModal" @tap="closeBindModal"></view>
		<view class="bind-modal" v-if="showBindModal">
			<view class="modal-header">
				<text class="modal-title">佩戴者绑定</text>
			</view>
			<view class="modal-body">
				<view class="form-row">
					<view class="form-item half">
						<view class="form-icon">
							<image src="/static/user.png" mode="aspectFit"></image>
						</view>
						<view class="form-content">
							<input class="form-input" v-model="wearerInfo.name" placeholder="孩子姓名" type="text" />
						</view>
					</view>

					<view class="form-item half">
						<view class="form-icon">
							<image src="/static/gender.png" mode="aspectFit"></image>
						</view>
						<view class="form-content">
							<picker class="form-select" style=" flex: 1;" mode='selector' :range="genderList" @change="changeGender($event)">
								<view :style="!wearerInfo.gender?'color:#8a8383;':''">
									{{wearerInfo.gender?wearerInfo.gender:'孩子性别'}}
								</view>
							</picker>
						</view>
					</view>
				</view>

				<view class="form-item">
					<view class="form-icon">
						<image src="/static/order.png" mode="aspectFit"></image>
					</view>
					<view class="form-content">
						<picker class="form-select" style=" flex: 1;" v-model="wearerInfo.birthDate" mode='date'
							:start=minDate :end=maxDate @change="setBirthDay">
							<view :style="!wearerInfo.birthDate?'color:#8a8383;':''">
								{{wearerInfo.birthDate?wearerInfo.birthDate:'出生年月'}}
							</view>
						</picker>
					</view>
				</view>

			</view>
			<view class="modal-footer">
				<button class="cancel-btn" @tap="closeBindModal">取消</button>
				<button class="confirm-btn" @tap="submitBindForm">确认激活</button>
			</view>
		</view>
	</view>
</template>

<script>
	import pageNavBar from '../component/pageNavBar.vue';

	export default {
		components: {
			pageNavBar
		},
		data() {
			return {
				orderData: null, // 订单数据
				loading: false, // 加载状态
				orderId: '', // 订单ID
				showWarranty: false, // 是否显示保障信息
				leftButtonText: '扫码验真', // 左侧按钮文字
				rightButtonText: '扫码验真', // 右侧按钮文字
				trueLeftShow: false,
				trueRightShow: false,
				showBindModal: false, // 是否显示绑定佩戴者弹窗
				minDate: '', // 最小日期
				maxDate: '', // 最大日期
				genderList: ['男', '女'],
				wearerInfo: {
					name: '', // 佩戴者姓名
					birthDate: '', // 出生年月
					gender: '' // 性别
				}
			}
		},
		onLoad() {},
		onShow() {
			if (uni.getStorageSync('scanLeft')) {
				this.leftButtonText = '真'
				this.trueLeftShow = true
			}
			if (uni.getStorageSync('scanRight')) {
				this.rightButtonText = '真'
				this.trueRightShow = true
			}
			const now = new Date()
			this.minDate = new Date(now.getFullYear() - 10, 0).toISOString().slice(0, 7)
			this.maxDate = new Date(now.getFullYear() - 1, 11).toISOString().slice(0, 7)
		},
		methods: {
			changeGender(e) {
				console.log(e)
				this.wearerInfo.gender = this.genderList[e.detail.value]
			},
			// 开始扫描二维码
			startScan() {
				const that = this

				// 调用uni-app的扫描API
				uni.scanCode({
					onlyFromCamera: true, // 只允许从相机扫描
					scanType: ['qrCode'], // 扫描类型为二维码
					success(res) {
						// 解析二维码内容
						const qrContent = res.result
						console.log('扫描结果:', qrContent)
						// 检查url
						that.$http.POST('/app/order/order/checkScanUrl', {
							scanUrl: qrContent
						}, (res) => {
							// 显示扫描成功提示
							uni.showToast({
								title: '扫描成功，正在跳转',
								icon: 'success'
							})

							that.$tools.routerTo('/pages/quality/qualityDetail?qrCodeContent=' + qrContent,
								'navigateTo', 'none')
						}, (err) => {
							uni.showToast({
								title: err.message || '网络请求失败，请检查网络连接',
								icon: 'none'
							})
						})
					},
					fail(err) {
						console.error('扫描失败:', err)
						uni.showToast({
							title: '扫描失败，请重试',
							icon: 'none'
						})
					}
				})
			},

			// 显示保障信息
			showWarrantyInfo() {
				// 显示绑定佩戴者弹窗
				this.showBindModal = true
			},

			// 关闭绑定佩戴者弹窗
			closeBindModal() {
				this.showBindModal = false
			},

			// 选择性别
			selectGender(gender) {
				this.wearerInfo.gender = gender
			},

			// 显示日期选择器
			showDatePicker() {
				const that = this
				const now = new Date()
				const year = now.getFullYear()
				const month = now.getMonth()

				// 打开日期选择器
				uni.datePicker({
					year: year,
					month: month + 1,
					day: 1,
					fields: 'month',
					success(res) {
						// 格式化日期为 YYYY-MM 格式
						that.wearerInfo.birthDate = `${res.year}-${String(res.month).padStart(2, '0')}`
					}
				})
			},
			setBirthDay(e) {
				this.wearerInfo.birthDate = e.detail.value;
			},
			setGender(e) {
				this.wearerInfo.gender = e.detail.value;
			},
			// 提交绑定表单
			submitBindForm() {
				const that = this
				// 表单验证
				if (!this.wearerInfo.name.trim()) {
					uni.showToast({
						title: '请输入佩戴者姓名',
						icon: 'none'
					})
					return
				}

				if (!this.wearerInfo.birthDate) {
					uni.showToast({
						title: '请选择出生年月',
						icon: 'none'
					})
					return
				}

				if (!this.wearerInfo.gender) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}

				// 显示加载状态
				this.loading = true

				// 获取左右眼镜片的扫码信息
				const scanLeft = uni.getStorageSync('scanLeft')
				const scanRight = uni.getStorageSync('scanRight')

				// 准备请求参数
				const params = {
					...this.wearerInfo,
					scanLeft: scanLeft,
					scanRight: scanRight
				}

				// 调用激活保障API
				that.$http.POST('/app/order/order/activeOrder', params, (res) => {
					// 隐藏加载状态
					this.loading = false

					if (res.code === 1000) {
						// 请求成功
						uni.showToast({
							title: '激活成功',
							icon: 'success'
						})

						uni.removeStorageSync('scanLeft')
						uni.removeStorageSync('scanRight')
						// 关闭弹窗
						this.closeBindModal()

						// 显示保障信息已激活
						this.showWarranty = true
					} else {
						// 请求失败
						uni.showToast({
							title: res.message || '激活失败，请重试',
							icon: 'none'
						})
					}
				}, (err) => {
					// 隐藏加载状态
					this.loading = false

					// 显示错误信息
					uni.showToast({
						title: err.message || '网络请求失败，请检查网络连接',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style>
	.scan-back {
		position: fixed;
		top: 33vw;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		z-index: -1;
		/* 置于底层 */
	}

	.scan-back-image {
		width: 100%;
	}

	/* 置顶底图样式 */
	.background-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/index_back.png');
		background-size: cover;
		background-position: center;
		z-index: -2;
		/* 置于底层 */
	}

	.scan-container {
		padding: 0;
		box-sizing: border-box;
		min-height: 100vh;
		background: linear-gradient(to bottom, #e6f7ff, #f0f9ff);
		position: relative;
	}

	/* 品牌头部 */
	.brand-header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #2ac8a6;
	}

	.brand-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}

	.brand-title {
		flex: 1;
		margin-left: 20rpx;
	}

	.brand-name {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		display: block;
	}

	.brand-slogan {
		color: #fff;
		font-size: 24rpx;
		opacity: 0.9;
	}

	.header-actions {
		display: flex;
		align-items: center;
	}

	.dots {
		width: 6rpx;
		height: 6rpx;
		background-color: #fff;
		border-radius: 50%;
		margin-right: 20rpx;
		position: relative;
	}

	.dots::before,
	.dots::after {
		content: '';
		position: absolute;
		width: 6rpx;
		height: 6rpx;
		background-color: #fff;
		border-radius: 50%;
		left: 0;
	}

	.dots::before {
		top: -12rpx;
	}

	.dots::after {
		bottom: -12rpx;
	}

	/* 主标题 */
	.main-title {
		text-align: center;
		margin: 300rpx 0 20rpx;
	}

	.title-text {
		color: #1e88e5;
		font-size: 36rpx;
		font-weight: bold;
		display: block;
	}

	.subtitle-text {
		color: #666;
		font-size: 28rpx;
		margin-top: 10rpx;
		display: block;
	}

	/* 镜片品牌区域 */
	.lens-brands {
		padding: 30rpx;
		background-color: #e6f7ff;
		margin: 0 30rpx;
		border-radius: 16rpx;
		position: relative;
	}

	.lens-brands::after {
		content: '';
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 200rpx;
		height: 100rpx;
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
		background-size: 20rpx 20rpx;
	}

	.brand-section {
		z-index: 1;
		position: relative;
	}

	.brand-text {
		color: #007aff;
		font-size: 32rpx;
		font-weight: bold;
		display: block;
	}

	.brand-subtext {
		color: #666;
		font-size: 24rpx;
		margin-top: 8rpx;
		display: block;
	}

	/* 扫描按钮区域 */
	.scan-buttons {
		display: flex;
		justify-content: space-around;
		margin: 95vw 8.5vw 26vw 8.5vw;
	}

	.lens-scan-btn {
		width: 28vw;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 保障按钮 */
	.warranty-button {
		display: flex;
		justify-content: center;
	}

	.warranty-btn {
		background-color: #3330;
		padding: 9vw 44vw;
	}

	/* 保障信息 */
	.warranty-info {
		margin: 30rpx;
		padding: 25rpx;
		background-color: #f0f9ff;
		border-radius: 12rpx;
		display: flex;
		align-items: flex-start;
	}

	.warranty-days {
		width: 80rpx;
		height: 80rpx;
		background-color: #2ac8a6;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.warranty-desc {
		flex: 1;
		color: #666;
		font-size: 26rpx;
		line-height: 1.5;
	}

	/* 订单信息 */
	.order-info {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		margin: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-item:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.label {
		width: 160rpx;
		color: #666;
		font-size: 28rpx;
	}

	.value {
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	/* 绑定佩戴者弹窗样式 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.bind-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		z-index: 1000;
		padding: 40rpx 30rpx;
	}

	.modal-header {
		padding: 10rpx 30rpx 30rpx;
		text-align: center;
	}

	.modal-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #089790;
	}

	.modal-body {
		padding: 0 30rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		background-color: #f7f7f7;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.form-item.half {
		flex: 1;
		margin-bottom: 0;
	}

	.form-item.half:first-child {
		margin-right: 20rpx;
	}

	.form-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.form-icon image {
		width: 40rpx;
		height: 40rpx;
	}

	.form-content {
		flex: 1;
		margin-top: 10rpx;
	}

	.form-input {
		width: 100%;
		height: 70rpx;
		background: transparent;
		border: none;
		font-size: 28rpx;
		color: #333;
	}

	.form-select {
		height: 70rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-footer {
		display: flex;
		margin-top: 40rpx;
		padding: 0 30rpx;
	}

	.cancel-btn {
		flex: 1;
		background-color: #f8f8f8;
		color: #666;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.confirm-btn {
		flex: 1;
		background-color: #089790;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>